<template>
    <view class="qly-radio" :class="{'qly-radio--square': shape === 'square'}">
        <radio :checked="checked" :disabled="disabled" :color="color">
            <slot/>
        </radio>
        <view class="overlay"/>
    </view>
</template>

<script setup>
const props = defineProps({
    checked: {
        default: null
    },
    shape: {
        type: String,
        default: 'circle'
    },
    disabled:{
        type: Boolean,
        default: false
    },
    color:{
        type: String,
        default: '#007aff'
    }
})
</script>

<style scoped>
.qly-radio {
    position: relative;
}

.qly-radio.qly-radio--square:deep(.uni-radio-input) {
    border-radius: 8rpx !important;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}
</style>
